<html>
<head>
	<link rel="stylesheet" type="text/css" href="flot/styles.css" />
		
	<script language="javascript" type="text/javascript" src="/flot/jquery.js"></script>
	<script language="javascript" type="text/javascript" src="/flot/jquery.flot.js"></script>
	<script language="javascript" type="text/javascript" src="/flot/jquery.flot.selection.js"></script>
	<title>Steinman Hall C11: String 0001 - Log</title>
	
</head>
<body>
	<section id="page"> <!-- Defining the #page section with the section tag -->

        <header> <!-- Defining the header section of the page with the appropriate tag -->
        
            <hgroup>
                <h1>CUNY Energy Institute</h1>
                <h3>Steinman Hall C11: String 0001 - Log</h3>
            </hgroup>
                            
            <nav class="clear"> <!-- The nav link semantically marks your main site navigation -->
                <ul>
                    <li><a href="realtime">Real Time Monitoring and Control</a></li>
					<li><a href="plotter">Log</a></li>
                </ul>
            </nav>
        
    	</header>

	<div class="line"></div>  <!-- Dividing line -->

	<section id="articles" style="width:70%;float:left"> <!-- A new section with the articles -->

            <article id="article1">
	
				<h2>LOG DATA</h2>
				
				<div class="line"></div>
				
				<div id="plots" class="plots">
					<div id="flot_load" class="plot"></div>
					<div id="flot_meter" class="plot"></div>
					<div id="flot_power" class="plot"></div>
					<div id="flot_soc" class="plot"></div>
				</div>
				</article>

	
	</section>
	
	<section style="width:27%;float:right">
		
		<article>
			
			<h2>Filter</h2>
			<div class="line"></div>
			<div>
				Select a portion of the graphs to zoom in. To clear your selection click below.<br><br>
				<button id="clearSelection" style="height:40px;width:100px">Clear Selection</button>
	        </div>
			</div>
			
		</article>
	</section>

	</section> <!-- Closing the #page section -->
	
</body>

<script src="/flot/build_dom.js"></script>
<script src="/flot/functions.js"></script> 
<script>

stuffs = $("[id^=flot_]")
field_json = {'time':1}

for (var i = 0; i < stuffs.length; i++)
{
	//console.log(thing.id)
	if (stuffs[i].id != undefined) 
	{
		field_json[stuffs[i].id.replace("flot_","")] = 1
	}
}


db_to_get = "realtime"
grabData({collection:db_to_get,query:{},fields:field_json},0)
stuff_to_omit = ['time','id']

for (name in field_json)
{
	if (stuff_to_omit.indexOf(name) == -1)
	{
		$("#flot_"+name).bind("plotselected",function (event, ranges) {
	
			out_min= ranges.xaxis.from;
			out_max = ranges.xaxis.to;	
			
			grabData({collection:db_to_get,query:{'time':{'$gt':out_min,'$lt':out_max}},fields:field_json},0)
	
		});
	}
}

$("#clearSelection").click(function (){grabData({collection:db_to_get,query:{},fields:field_json},0)});

</script>
</html>